<template>
	<view class="webview-container">
	    <web-view :src="webViewUrl" class="web-view"></web-view>
	    <view class="model-top">
			<image src="@/assets/images/logo.png" class="image-style"></image>
			<view class="model-title">
				<image src="@/assets/images/model-h-bg.png"></image>
				<text>{{data.info.name}}</text>
			</view>
		</view>
		<view class="model-bottom ">
			<view class="relative w-[200px] h-[200px] flex flex-col items-center justify-center z-999  pointer-events-auto" @click="handleBack()">
				<image src="@/assets/images/gray-flower.png" class=" w-[200px] h-[200px] absolute top-0 left-0 z-[-1]"/>
				<image src="@/assets/images/back_simple.png" class="w-[33px] h-[31px] mt-[-20px]"></image>
				<text class="text-[30px] text-white leading-[50px]" >返回</text>
			</view>
			<view class="flex items-center justify-center text-white text-[36px] mt-[24px]">
				<view class="tip-wrap !pl-[0]">
					<image src="@/assets/images/a-3D_icon.png" class="w-[72px] h-[44px]"/><text>自由旋转</text>
				</view>
				<view class="tip-wrap">
					<image src="@/assets/images/move-icon.png" class="w-[54px] h-[46px]" /><text>平移</text>
				</view>
				<view class="tip-wrap !border-none">
					<image src="@/assets/images/scale_icon.png" class="w-[54px] h-[46px]" /><text class="!border-none !pr-0">缩放</text>
				</view>
			</view>
		</view>
	  </view>
</template>

<script setup>
import {getLocalDetail} from '@/hooks/getLocalDetail'
 import {ref} from 'vue'
 const webViewUrl = ref(`/static/mview/index.html?path=037.mview&time=9999`)

 const {data} = getLocalDetail(function() {
	 if(data.info.url) {
		 if(data.info.url.startsWith('http')||data.info.url.startsWith('https')) {
			 webViewUrl.value = data.info.url
		 }else {
			 webViewUrl.value = `/static/mview/index.html?path=${encodeURIComponent(data.info.url)}&time=${new Date().getTime()}`
		 }
		 
	 }
 })
 function handleBack() {
	 console.log('1111')
	 uni.navigateBack()
 }
</script>

<style lang="scss">
	.webview-container {
		width: 100vw;
		height: 100vh;
		background: url('@/assets/images/wb-bg.png') no-repeat;
		background-size: 100% 100%;
	}
	.model-top {
		width: 100vw;
		position: fixed;
		z-index: 999;
		pointer-events: none;
	}
	.image-style {
		margin-top: 90px;
		left: 90px;
		width: 292px;
		height: 58px;
	
	}
	.model-title {
		margin-top: 90px;
		width: 100%;
		position: relative;
		text-align: center;
		image{
			
			width: 848px;
			height: 118px;
		}
		text{
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			position: absolute;
			font-size: 36px;
			color: white;
		}
	}
	.model-bottom {
		width: 100vw;
		position: fixed;
		bottom: 100px;
		z-index: 999;
		display: flex;
		align-items: center;
		flex-direction: column;
		pointer-events: none;
	    .tip-wrap{
			@apply flex items-center justify-center pl-[30px];
			
			image {
				margin-right: 20px;
			}
			
			text {
				line-height: 34px;
				border-right: 1px solid;
				padding-right: 30px;
			}
		}		
	}

</style>